<!--
 * @Description: 账户充值
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2023-08-18 18:12:48
 * @LastEditTime: 2023-08-19 17:19:52
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->

<template>
  <div class="lb-adapay-stored">
    <top-nav />
    <div class="page-main">
      <div class="class-menu-list flex-warp mt-lg">
        <div class="item-child flex-center">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #608dff"
          >
            <i class="iconfont icon-caiwuguanli c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ detail.cash || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">当前余额</div>
              <lb-tool-tips :padding="0">当前可用于分账的金额</lb-tool-tips>
            </div>
          </div>
        </div>
        <div class="item-child flex-center">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #2bcd8e"
          >
            <i class="iconfont iconfenzhang c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ detail.accounts_cash || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">已分账金额</div>
              <lb-tool-tips :padding="0"
                >商家充值进来后，已经参与分账，划分到各角色的金额总数</lb-tool-tips
              >
            </div>
          </div>
        </div>
        <div class="item-child flex-center">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #ffa500"
          >
            <i class="iconfont iconyuqi c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ detail.over_cash || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">过期余额</div>
              <lb-tool-tips :padding="0"
                >由于三方支付公司，分账时间最长为一年半，若商家充值进来的金额在一年半内未使用，则会失效，不能参与分账，可自行到第三方分账控制台提现到对公账户</lb-tool-tips
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="space-lg fill-body"></div>
    <div class="page-main">
      <lb-tips
        >当我方系统平台余额大于第三方余额时，会导致使用余额支付的订单无法分账，当余额不足时，需要商家进行充值后，{{
          $t('action.attendantName')
        }}、{{ $t('action.attendantName') }}经纪人、分销合伙人、 渠道商、
        业务员、代理商才能分账提现</lb-tips
      >

      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="120px"
        class="basic-form"
        style="margin-top: 40px"
        v-if="pay_type === 1"
      >
        <el-form-item label="充值金额" prop="pay_price">
          <el-input v-model="subForm.pay_price" placeholder="请输入充值金额">
            <template slot="append">元</template>
          </el-input>
          <lb-tool-tips>仅能使用支付宝充值</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo" v-preventReClick
            >充值</lb-button
          >
        </el-form-item>
      </el-form>

      <div class="pay-order-info flex-center flex-column" v-if="pay_type === 2">
        <div class="f-big-title text-bold">扫一扫付款</div>
        <div class="flex-y-baseline f-title c-warning text-bold mt-sm">
          ¥
          <div class="f-big-title" style="margin-left: 3px">
            {{ subForm.pay_price }}
          </div>
        </div>
        <div class="space-xxl"></div>
        <div class="pay-info flex-center flex-column pd-sm">
          <img class="img" :src="pay_order.code || ''" />
          <div
            class="text-info flex-center f-paragraph c-base"
            style="background: #06b4fd"
          >
            <i class="iconfont icon-scan"></i>
            <div class="ml-md">
              <div>打开手机支付宝</div>
              <div>扫一扫继续付款</div>
            </div>
          </div>
          <div class="space-lg"></div>
          <el-button @click="toChangeBtn" size="mini" plain type="danger">
            重新充值
          </el-button>
          <div class="space-lg"></div>
        </div>
      </div>

      <div class="pay-order-info flex-center flex-column" v-if="pay_type === 3">
        <i
          class="pay-icon iconfont"
          :class="[
            { 'iconjishiwancheng c-success': pay_order.order_code === 1 },
            { 'iconyuqi c-warning': pay_order.order_code === 0 }
          ]"
        ></i>
        <div class="c-title text-bold mt-sm">
          {{
            pay_order.order_code === 1 ? '支付成功' : '二维码已过期，请重新下单'
          }}
        </div>
        <div class="space-xxl"></div>
        <el-button @click="toChangeBtn" size="mini" plain type="danger">
          {{ pay_order.order_code === 1 ? '再次充值' : '重新充值' }}
        </el-button>
        <div class="space-lg"></div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data () {
    return {
      detail: {},
      pay_type: 1,
      timer: null,
      subForm: {
        pay_price: ''
      },
      subFormRules: {
        pay_price: { required: true, validator: this.$reg.isMoney, text: '充值金额', reg_type: 2, trigger: 'blur' }
      }
    }
  },
  created () {
    this.getDetail()
  },
  destroyed () {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    async getDetail () {
      let { code, data } = await this.$api.adapay.adminInfo()
      if (code !== 200) return
      this.detail = data
    },
    async submitFormInfo () {
      let flag = false
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          flag = true
        }
      })
      let subForm = JSON.parse(JSON.stringify(this.subForm))
      if (flag) {
        let { data } = await this.$api.adapay.adminPay(subForm)
        this.pay_order = data
        this.toConfirmPay(data)
      }
    },
    async toConfirmPay (params) {
      this.timer = setInterval(() => {
        if (moment(moment().format('YYYY-MM-DD HH:mm:ss')).unix() > params.expiration_time) {
          clearInterval(this.timer)
          this.pay_order.order_code = 0
          this.pay_type = 3
          return
        }
        this.findOrderPay(params.order_code)
      }, 2000)
      this.pay_type = 2
    },
    async findOrderPay (order) {
      let { code, data } = await this.$api.adapay.checkAdminPay({ order_code: order })
      if (code === 200 && data) {
        this.timer && clearInterval(this.timer)
        this.pay_order.order_code = data
        this.pay_type = 3
        this.getDetail()
      }
    },
    toChangeBtn () {
      this.timer && clearInterval(this.timer)
      this.pay_type = 1
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-adapay-stored {
  width: 100%;
  .el-input {
    width: 300px;
  }
  .class-menu-list {
    margin-left: 50px;
    .item-child {
      width: 25%;
      .item-icon {
        width: 50px;
        height: 50px;
        .iconfont {
          font-size: 25px;
        }
      }
    }
  }
  .pay-order-info {
    width: 400px;
    .pay-info {
      border: 1px solid #e4e4ee;
      .img {
        width: 300px;
      }
      .text-info {
        width: 270px;
        height: 60px;

        .icon-scan {
          font-size: 45px;
        }
      }
    }
    .pay-icon {
      font-size: 80px;
    }
  }
}
</style>
